<template>
  <a-button
    v-if="buttonData.isShow"
    :loading="(buttonData && buttonData.loading) || (buttonData.options && buttonData.options.loading)"
    :disabled="(buttonData && buttonData.disabled) || (buttonData.options && buttonData.options.disabled)"
    v-bind="buttonData.options"
    @click.stop="handeClick"
    @blue="123123"
  >
    <span>{{ buttonData.icon }}</span>
    {{ buttonData.label }}
  </a-button>
</template>

<script lang="ts">
import { defineComponent, createVNode, PropType } from 'vue'
// import { Modal, Button } from 'ant-design-vue'
import { Modal } from 'ant-design-vue'
import { ButtonInterFace } from './ButtonInterFace'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'

export default defineComponent({
  name: 'i-bottom',
  props: {
    buttonData: {
      type: Object as PropType<ButtonInterFace>,
      required: true
    },
    data: {
      type: Object as PropType<any>
    }
  },
  components: {
    // 'a-button': Button
  },
  setup (props, ctx) {
    const handeClick = () => {
      if (props.buttonData.remindData && props.buttonData.remindData.isShow) {
        Modal.confirm({
          title: () => (props.buttonData.remindData ? props.buttonData.remindData.remindTitle : ''),
          icon: () =>
            props.buttonData.remindData
              ? createVNode(props.buttonData.remindData.icon || ExclamationCircleOutlined)
              : '',
          content: () => (props.buttonData.remindData ? props.buttonData.remindData.remindContext : ''),
          okText: () => '确定',
          cancelText: () => '取消',
          onOk: () => {
            submit(props.buttonData.Fun)
          }
        })
      } else {
        submit(props.buttonData.Fun)
      }
    }
    const submit = (fun: any) => {
      if (fun) {
        ctx.emit(fun, props.buttonData, props.data)
      }
    }
    return {
      handeClick,
      submit
      // event.preventDefault()
      // event.stopPropagation()
    }
  },
  methods: {}
})
</script>
